<template>
  <div class="terms-container">
    <van-nav-bar
      title="用户协议"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    
    <div class="terms-content">
      <h1>万师傅用户协议</h1>
      <p class="update-time">最后更新日期：2024年1月1日</p>
      
      <section class="section">
        <h2>一、总则</h2>
        <p>1.1 欢迎您使用万师傅平台服务！</p>
        <p>1.2 本协议是您与万师傅平台之间就相关服务事宜订立的协议。</p>
        <p>1.3 请您仔细阅读本协议，特别是免除或限制责任的条款、法律适用和争议解决条款。</p>
      </section>

      <section class="section">
        <h2>二、服务内容</h2>
        <p>2.1 万师傅平台为您提供包括但不限于：</p>
        <ul>
          <li>家居服务需求发布</li>
          <li>师傅接单服务</li>
          <li>在线支付功能</li>
          <li>服务评价系统</li>
          <li>客户服务支持</li>
        </ul>
      </section>

      <section class="section">
        <h2>三、用户注册与账户</h2>
        <p>3.1 您注册时应提供真实、准确、完整的信息。</p>
        <p>3.2 您应妥善保管账户信息，不得转让、出借账户。</p>
        <p>3.3 如发现他人未经授权使用您的账户，应立即通知平台。</p>
      </section>

      <section class="section">
        <h2>四、用户行为规范</h2>
        <p>4.1 您承诺遵守法律法规，不得利用本服务：</p>
        <ul>
          <li>从事违法活动</li>
          <li>侵犯他人合法权益</li>
          <li>发布虚假信息</li>
          <li>干扰平台正常运营</li>
        </ul>
      </section>

      <section class="section">
        <h2>五、服务费用</h2>
        <p>5.1 平台部分服务可能收取费用，具体以页面公示为准。</p>
        <p>5.2 平台有权调整服务费用标准，调整后将进行公示。</p>
      </section>

      <section class="section">
        <h2>六、责任限制</h2>
        <p>6.1 平台按"现状"提供服务的，不提供任何明示或暗示的保证。</p>
        <p>6.2 因不可抗力导致服务中断，平台不承担责任。</p>
      </section>

      <section class="section">
        <h2>七、协议修改</h2>
        <p>7.1 平台有权根据需要修改本协议。</p>
        <p>7.2 修改后的协议将在平台公示，如您继续使用服务视为接受修改。</p>
      </section>

      <section class="section">
        <h2>八、联系我们</h2>
        <p>如果您对本协议有任何疑问，请联系：</p>
        <p>客服电话：400-xxx-xxxx</p>
        <p>客服邮箱：service@wanshifu.com</p>
      </section>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const onClickLeft = () => {
  router.back();
};
</script>

<style lang="scss" scoped>
.terms-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.terms-content {
  padding: 20px;
  background: white;
  line-height: 1.6;
  
  h1 {
    text-align: center;
    font-size: 20px;
    margin-bottom: 10px;
    color: #333;
  }
  
  .update-time {
    text-align: center;
    color: #666;
    font-size: 14px;
    margin-bottom: 30px;
  }
  
  .section {
    margin-bottom: 25px;
    
    h2 {
      font-size: 16px;
      color: #333;
      margin-bottom: 10px;
      padding-bottom: 5px;
      border-bottom: 1px solid #eee;
    }
    
    p {
      margin-bottom: 8px;
      color: #666;
      font-size: 14px;
    }
    
    ul {
      padding-left: 20px;
      margin: 10px 0;
      
      li {
        margin-bottom: 5px;
        color: #666;
        font-size: 14px;
      }
    }
  }
}
</style>